<template>
  <div class="goodsdetail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <div class="detail-top">
        <div class="good-top">商品</div>
        <div class="good-top">评价</div>
        <div class="good-top">详情</div>
        <div class="good-top">推荐</div>
      </div>
      <div class="det-pic-box">
        <img :src="$pregImg+user.img" />
        <div class="det-number">8/8</div>
      </div>
      <div class="detail-goods">
        <div class="fir">
          <div class="fir-l">
            <span>
              <b>&yen;</b>
              {{user.market_price}}
            </span>
            <span>￥{{user.price}}</span>
          </div>
          <div class="fir-r">
            <span>收藏</span>
          </div>
        </div>
        <div class="sec">
          <p>{{user.goodsname}}</p>
          <p>{{user.specsattr}}</p>
        </div>
        <div class="third">11.11限时299元起</div>
        <div class="fourth">
          <p>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</p>
          <span>查看></span>
        </div>
      </div>
      <div class="discounts-box">
        <div class="dis-f">
          <span class="quan">领券</span>
          <div class="money">
            <span>300</span>
            <span>50</span>
            <span>10</span>
          </div>
        </div>
        <div class="dis-s">
          <span class="fen">分期</span>
          <div class="canselect">
            可选3/6/12期
            <span>></span>
          </div>
        </div>
      </div>
      <div class="shopping-box">
        <div class="shop-pic">
          <div class="s-box">
            <img src="../../assets/image/hotline.png" alt />
            <span>客服</span>
          </div>
          <div class="s-box">
            <img src="../../assets/image/store.png" alt />
            <span>店铺</span>
          </div>
          <div class="s-box">
            <img src="../../assets/image/shoppingcart.png" alt />
            <span>购物车</span>
          </div>
        </div>
        <div class="shopping-cart" @click="join">加入购物车</div>
        <div class="buy-now" :is="'router-link'" :to="`/order?id=${user.id}`">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsInfo } from "../../request/api.js";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    join() {
      // console.log(this.data);
      this.addcart(this.data);
    },
      onClickLeft() {
      this.$router.go(-1)
    },
    // buynow(id){
    //   console.log(id);
    //   // console.log(this.$route.query.id);
    //   this.oneinfo(id)

    //   // console.log(this.user);
    // },

    ...mapActions({
      // dechangenum: "cart/denumActions",
      // addchangenum: "cart/addnumActions",
      requestuid: "cart/uidActions",
      requestgoodsid: "cart/goodsidActions",
      addcart: "cart/addcartActions",
      // clearnum:"cart/clearnum",
      requestcart: "cart/cartActions"
      // oneinfo:"order/oneinfo"
    })
  },
  mounted() {
    getGoodsInfo(this.$route.query.id).then(res => {
      this.user = res.list[0];
      console.log(res);
      // console.log(this.user);
      // this.clearnum()
      this.requestgoodsid(this.user.id);
    });
    this.requestuid(); //获取uid
  },
  computed: {
    ...mapGetters({
      data: "cart/data"
    })
  }
};
</script>

<style scoped>
.goodsdetail {
  width: 100vw;
  padding-bottom: 0.2rem;
  background-color: #efefef;
  margin-bottom: 0.49rem;
}
.detail-top {
  margin: 0 auto;
  width: 100%;
  height: 0.32rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
  display: flex;
}
.good-top {
  height: 0.32rem;
  flex: 1;
  text-align: center;
  line-height: 0.32rem;
  color: #fff;
  font-size: 0.14rem;
}
.detail-top .good-top:nth-of-type(1) {
  font-weight: 600;
  font-size: 0.16rem;
}
.det-pic-box {
  width: 100%;
  height: 3.75rem;
  margin: 0 auto;
  min-width: 320px;
  max-width: 750px;
  position: relative;
}
.det-pic-box img {
  width: 100%;
  height: 100%;
}
.det-number {
  width: 0.4rem;
  height: 0.18rem;
  color: #fff;
  font-size: 0.14rem;
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  text-align: center;
  line-height: 0.18rem;
  background-color: #333333;
  border-radius: 0.09rem;
}
.detail-goods {
  margin: 0 auto;
  width: 100%;
  height: 1.55rem;
  margin-bottom: 0.1rem;
  background-color: #fff;
}
.detail-goods .fir {
  width: 3.55rem;
  margin: 0 auto;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
}
.fir .fir-l b {
  font-size: 0.12rem;
}
.fir .fir-l span:nth-of-type(1) {
  color: #ff6040;
  font-size: 0.3rem;
}
.fir .fir-l span:nth-of-type(2) {
  color: #999;
  text-decoration: line-through;
}
.fir .fir-r {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #ff6040;
  font-size: 0.12rem;
}
.sec,
.fourth {
  width: 3.55rem;
  margin: 0 auto;
}
.sec {
  margin-bottom: 0.1rem;
}
.sec p:nth-of-type(1) {
  font-size: 0.16rem;
  color: #333333;
}
.sec p:nth-of-type(2) {
  font-size: 0.14rem;
  color: #999;
}
.third {
  background-color: #ff8066;
  width: 3.55rem;
  width: 1.03rem;
  height: 0.16rem;
  text-align: center;
  line-height: 0.16rem;
  color: #fff;
  margin-left: 0.1rem;
  margin-bottom: 0.1rem;
}
.fourth {
  height: 0.2rem;
  color: #999999;
  background-color: #f2f2f2;
  line-height: 0.2rem;
  position: relative;
}
.fourth p {
  padding-left: 0.05rem;
}
.fourth span {
  color: #ff6040;
  position: absolute;
  right: 0;
  bottom: 0;
}
.discounts-box {
  width: 100%;
  margin: 0 auto;
  height: 1rem;
  background-color: #fff;
  padding-left: 0.1rem;
}
.dis-f {
  display: flex;
  align-items: center;
  height: 0.45rem;
  padding-top: 0.09rem;
}
.dis-f .quan {
  margin-right: 0.2rem;
  font-weight: 600;
  padding-bottom: 0.09rem;
}
.money {
  display: flex;
  flex: 1;
  padding-bottom: 0.09rem;
  border-bottom: 1px solid #cccccc;
}
.money span {
  padding: 0rem 0.06rem;
}
.money span:nth-of-type(1) {
  background-image: url(../../assets/image/full.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 0.1rem;
}
.money span:nth-of-type(2) {
  background-image: url(../../assets/image/full.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 0.1rem;
}
.money span:nth-of-type(3) {
  background-image: url(../../assets/image/full.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.dis-s {
  display: flex;
  height: 0.45rem;
  line-height: 0.45rem;
}
.dis-s .fen {
  margin-right: 0.2rem;
  font-weight: 600;
  padding-bottom: 0.09rem;
}
.canselect {
  color: #666666;
  position: relative;
  flex: 1;
  padding-bottom: 0.09rem;
  border-bottom: 1px solid #cccccc;
}
.canselect span {
  position: absolute;
  right: 0.1rem;
  bottom: 0;
}
.shopping-box {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  height: 0.49rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.shop-pic {
  height: 100%;
  flex: 1;
  display: flex;
  border-top: 1px solid #cccccc;
}
.shop-pic .s-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.s-box img {
  width: 0.2rem;
  height: 0.2rem;
}
.shopping-cart {
  width: 1.1rem;
  height: 0.49rem;
  line-height: 0.49rem;
  text-align: center;
  color: #663014;
  font-size: 0.16rem;
  background-color: #ffcc66;
  font-weight: 600;
}
.buy-now {
  width: 1.1rem;
  height: 0.49rem;
  line-height: 0.49rem;
  text-align: center;
  color: #fff;
  font-size: 0.16rem;
  background-color: #ff6040;
  font-weight: 600;
}
</style>